import { useSpring, animated } from "@react-spring/web";

function Herorightarticle() {
  const springs = useSpring({
    from: { x: 0, y: 0 },
    to: async (next) => {
      await next({ x: 300, y: 200 }); // 弧形终点
      await next({ x: 0, y: 0 }); // 返回起点
    },
    config: { tension: 200, friction: 50 },
    loop: true,
  });

  return (
    <aside className="border-2 border-black col-span-2 row-span-4">
      <animated.div
        style={{
          width: 80,
          height: 80,
          background: "#B22222",
          borderRadius: 100,
         
          ...springs,
        }}
      />
      <animated.div
        style={{
          width: 80,
          height: 80,
          boxShadow: "15px 15px 0 0 #FF8C00",
          background: "#efebdf",
          borderRadius: 50,
        }}
      />
    </aside>
  );
}

export default Herorightarticle;
